<template>
  <div class="UserInfoContainer">
    <el-dialog
        title="用户信息"
        :visible.sync="dialogUserInfo"
        width="840px"
        :before-close="closeALL">
        <el-form :model="userInfo" ref="userInfo" :rules="rules">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="userInfo.name" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="证书序号" prop="ca">
                <el-input v-model="userInfo.ca"></el-input>
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
                <el-input v-model="userInfo.mobile"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idNumber">
                <el-input v-model="userInfo.idNumber"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
                <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item label="固定电话" prop="telephone">
                <el-input v-model="userInfo.telephone"></el-input>
            </el-form-item>
            <el-form-item label="职称" prop="nickname">
                <el-input v-model="userInfo.nickname"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" prop="birthdayDate">
                <el-date-picker
                    v-model="userInfo.birthday"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="closeALL">取 消</el-button>
            <el-button type="primary" @click="UserInfoSure">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers('homeModule');
import appUtil from '~/assets/utils/appUtil.js';
export default {
    name: 'UserInfo',
    props: ['dialogUserInfo'],
    data () {
        return {
            rules:{
                name: [
                    { required: true, message: '请输姓名', trigger: 'blur' }
                ],
                email: [
                    // { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                    { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
                ]
            }
        };
    },
    computed: {
        ...mapState({
            userInfo:state => state.userInfo
        }),
        ...mapGetters([
        ])
    },
    created(){
        this.getUserInfoAsync();
    },
    methods:{
        ...mapMutations([
            
        ]),
        ...mapActions([
            'getUserInfoAsync',
            'updateUserInfoAsync'
        ]),
        // 关闭弹框
        closeALL () {
            // 子组件调用父组件的方法
            this.$parent.closeALL();
        },
        // 更新用户信息
        UserInfoSure () {
            let params = {};
            params['id']=appUtil.getSes('userId');
            params['lastModifiedVersion']=this.userInfo.lastModifiedVersion;
            params['name'] = this.userInfo.name;
            params['mobile'] = this.userInfo.mobile === null ? '': this.userInfo.mobile;
            params['telephone'] = this.userInfo.telephone === null ? '': this.userInfo.telephone;
            params['idNumber'] = this.userInfo.idNumber === null ? '': this.userInfo.idNumber;
            params['email'] = this.userInfo.email === null ? '': this.userInfo.email;
            params['gender'] = null;
            params['nickname'] = this.userInfo.nickname === null ? '': this.userInfo.nickname;
            params['birthday'] = this.userInfo.birthday ;
            params['ca'] = this.userInfo.ca === null ? '': this.userInfo.ca;
            this.updateUserInfoAsync(params);
            this.$parent.closeALL();
        }
    }
};
</script>

<style lang="scss" scoped>
.UserInfoContainer{
     .el-form{
        margin-top: 20px;
    }
     .el-dialog__body{
        padding-bottom: 4px;
    }
     .el-form-item__content{
        margin-left: 100px;
    }
     .el-input{
        width:270px
    }
     .el-form-item__label{
        width: 100px;
    }
     .el-form-item{
        display: inline-block;
    }
     .el-date-editor.el-input{
        width: 270px!important;
    }
}

</style>
